<template>
  <div>
    <div class="grid  grid--layout  grid-4 grid-portable-3 grid-lap-2 grid-tiny-1">
      <aplusmax-hotdetail-goods v-for="goods in itemsComputed" :key="goods.goods_id" :goods="goods"></aplusmax-hotdetail-goods>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, ref, reactive, computed} from 'vue'
import {goodsRandom} from "@/api/goods.ts";


let items = ref([])
// 加载商品
const getRandomGoods = () => {
  const payload = {
    is_new: 0,
    split:4,
    size: 8
  }
  goodsRandom(payload).then((res) => {
    items.value = res.data
    console.log(items.value, "+++++++++++")
  }).catch((err) => {
    console.log(err)
  });
}
getRandomGoods()

const itemsComputed = computed(() => {
  return items.value.flat()
})

defineProps({})

const emit = defineEmits([])

defineExpose({})
</script>


<style scoped lang="less">
.grid--layout {
  --col-size: calc( (100% - 30px * ( 4 - 1)) / 4 );
  grid-template-columns: repeat(4, var(--col-size));
}
.grid-4 {
  --visible-cols: 4;
}
.grid {
  --col-gap: 30px;
  --col-size: calc((100% - 30px *( 4 - 1)) / 4);
  display: grid;
  grid-gap: 30px;
}
</style>
